<template>
  <div class="detection-technique">
    <div class="page-header">
      <h1>信息辨别技巧</h1>
      <p>掌握关键技巧，提升信息真实性判断能力</p>
    </div>

    <!-- 学习进度 -->
    <div class="progress-section">
      <div class="progress-card">
        <h3>学习进度</h3>
        <div class="progress-bar">
          <div class="progress-fill" :style="{width: overallProgress + '%'}"></div>
        </div>
        <p>{{ overallProgress }}% 完成 ({{ completedModules }}/{{ totalModules }})</p>
      </div>
    </div>

    <!-- 技巧分类 -->
    <div class="technique-categories">
      <div class="category-tabs">
        <button 
          v-for="category in categories" 
          :key="category.id"
          class="tab-button"
          :class="{active: activeCategory === category.id}"
          @click="switchCategory(category.id)"
        >
          <i :class="category.icon"></i>
          {{ category.name }}
        </button>
      </div>

      <div class="category-content">
        <div v-for="category in categories" :key="category.id" v-show="activeCategory === category.id">
          <div class="category-description">
            <h2>{{ category.name }}</h2>
            <p>{{ category.description }}</p>
          </div>

          <!-- 学习模块 -->
          <div class="learning-modules">
            <div 
              v-for="module in category.modules" 
              :key="module.id"
              class="module-card"
              :class="{completed: module.completed, locked: module.locked}"
            >
              <div class="module-header">
                <div class="module-icon">
                  <i :class="module.icon"></i>
                </div>
                <div class="module-info">
                  <h3>{{ module.title }}</h3>
                  <p>{{ module.description }}</p>
                </div>
                <div class="module-status">
                  <span v-if="module.completed" class="status-completed">
                    <i class="fas fa-check-circle"></i>
                    已完成
                  </span>
                  <span v-else-if="module.locked" class="status-locked">
                    <i class="fas fa-lock"></i>
                    锁定
                  </span>
                  <span v-else class="status-available">
                    <i class="fas fa-play-circle"></i>
                    可学习
                  </span>
                </div>
              </div>
              
              <div class="module-content">
                <div class="module-meta">
                  <span class="difficulty" :class="module.difficulty">{{ module.difficultyText }}</span>
                  <span class="duration">{{ module.duration }}</span>
                  <span class="points">{{ module.points }}积分</span>
                </div>
                
                <div class="module-actions">
                  <button 
                    class="btn btn-primary" 
                    @click="startModule(module)"
                    :disabled="module.locked"
                  >
                    {{ module.completed ? '复习' : '开始学习' }}
                  </button>
                  <button 
                    class="btn btn-secondary" 
                    @click="showModuleDetail(module)"
                  >
                    详情
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实战练习 -->
    <div class="practice-section">
      <h2>实战练习</h2>
      <div class="practice-grid">
        <div 
          v-for="practice in practiceExercises" 
          :key="practice.id"
          class="practice-card"
        >
          <div class="practice-image">
            <img :src="practice.image" :alt="practice.title">
            <div class="practice-type">{{ practice.type }}</div>
          </div>
          <div class="practice-content">
            <h3>{{ practice.title }}</h3>
            <p>{{ practice.description }}</p>
            <div class="practice-meta">
              <span class="difficulty" :class="practice.difficulty">{{ practice.difficultyText }}</span>
              <span class="score">最高分: {{ practice.bestScore }}</span>
            </div>
            <button class="btn btn-primary" @click="startPractice(practice)">
              开始练习
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 技巧速查 -->
    <div class="quick-reference">
      <h2>技巧速查</h2>
      <div class="reference-grid">
        <div 
          v-for="tip in quickTips" 
          :key="tip.id"
          class="tip-card"
        >
          <div class="tip-icon">
            <i :class="tip.icon"></i>
          </div>
          <div class="tip-content">
            <h4>{{ tip.title }}</h4>
            <p>{{ tip.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习成就 -->
    <div class="achievements">
      <h2>学习成就</h2>
      <div class="achievement-list">
        <div 
          v-for="achievement in achievements" 
          :key="achievement.id"
          class="achievement-card"
          :class="{unlocked: achievement.unlocked}"
        >
          <div class="achievement-icon">
            <i :class="achievement.icon"></i>
          </div>
          <div class="achievement-info">
            <h3>{{ achievement.title }}</h3>
            <p>{{ achievement.description }}</p>
            <div class="achievement-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{width: achievement.progress + '%'}"></div>
              </div>
              <span>{{ achievement.progress }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const activeCategory = ref('text')
const completedModules = ref(8)
const totalModules = ref(12)

// 计算属性
const overallProgress = computed(() => {
  return Math.round((completedModules.value / totalModules.value) * 100)
})

// 技巧分类
const categories = ref([
  {
    id: 'text',
    name: '文本检测',
    icon: 'fas fa-align-left',
    description: '学习识别虚假文本内容的方法和技巧',
    modules: [
      {
        id: 1,
        title: '语言特征分析',
        description: '通过语言模式识别虚假内容',
        icon: 'fas fa-language',
        difficulty: 'beginner',
        difficultyText: '入门',
        duration: '15分钟',
        points: 50,
        completed: true,
        locked: false
      },
      {
        id: 2,
        title: '情感色彩识别',
        description: '分析文本情感倾向判断真实性',
        icon: 'fas fa-heart',
        difficulty: 'intermediate',
        difficultyText: '中级',
        duration: '20分钟',
        points: 75,
        completed: false,
        locked: false
      },
      {
        id: 3,
        title: '逻辑一致性检查',
        description: '检查文本内容的逻辑合理性',
        icon: 'fas fa-link',
        difficulty: 'advanced',
        difficultyText: '高级',
        duration: '25分钟',
        points: 100,
        completed: false,
        locked: true
      }
    ]
  },
  {
    id: 'image',
    name: '图像检测',
    icon: 'fas fa-image',
    description: '掌握图像真实性验证的核心技术',
    modules: [
      {
        id: 4,
        title: '图像元数据分析',
        description: '通过EXIF信息判断图像真实性',
        icon: 'fas fa-info-circle',
        difficulty: 'beginner',
        difficultyText: '入门',
        duration: '18分钟',
        points: 60,
        completed: true,
        locked: false
      },
      {
        id: 5,
        title: '反向图像搜索',
        description: '使用搜索引擎验证图像来源',
        icon: 'fas fa-search',
        difficulty: 'intermediate',
        difficultyText: '中级',
        duration: '22分钟',
        points: 80,
        completed: false,
        locked: false
      }
    ]
  },
  {
    id: 'audio',
    name: '音频检测',
    icon: 'fas fa-volume-up',
    description: '识别音频内容的真实性和完整性',
    modules: [
      {
        id: 6,
        title: '音频质量分析',
        description: '通过音频质量判断真实性',
        icon: 'fas fa-wave-square',
        difficulty: 'intermediate',
        difficultyText: '中级',
        duration: '20分钟',
        points: 70,
        completed: false,
        locked: false
      }
    ]
  },
  {
    id: 'video',
    name: '视频检测',
    icon: 'fas fa-video',
    description: '学习视频内容真实性验证方法',
    modules: [
      {
        id: 7,
        title: '视频时间戳验证',
        description: '验证视频的时间和地点信息',
        icon: 'fas fa-clock',
        difficulty: 'advanced',
        difficultyText: '高级',
        duration: '30分钟',
        points: 120,
        completed: false,
        locked: true
      }
    ]
  }
])

// 实战练习
const practiceExercises = ref([
  {
    id: 1,
    title: '新闻真实性判断',
    description: '练习判断新闻报道的真实性',
    type: '文本练习',
    difficulty: 'beginner',
    difficultyText: '入门',
    bestScore: 85,
    image: '/api/placeholder/200/150'
  },
  {
    id: 2,
    title: '图像篡改识别',
    description: '识别被篡改或合成的图像',
    type: '图像练习',
    difficulty: 'intermediate',
    difficultyText: '中级',
    bestScore: 72,
    image: '/api/placeholder/200/150'
  },
  {
    id: 3,
    title: '深度伪造检测',
    description: '检测AI生成的虚假视频内容',
    type: '视频练习',
    difficulty: 'advanced',
    difficultyText: '高级',
    bestScore: 0,
    image: '/api/placeholder/200/150'
  }
])

// 技巧速查
const quickTips = ref([
  {
    id: 1,
    title: '检查信息来源',
    description: '始终验证信息的原始来源和发布者',
    icon: 'fas fa-source'
  },
  {
    id: 2,
    title: '交叉验证',
    description: '通过多个独立来源验证信息的真实性',
    icon: 'fas fa-check-double'
  },
  {
    id: 3,
    title: '时间一致性',
    description: '检查时间戳和时序逻辑的合理性',
    icon: 'fas fa-clock'
  },
  {
    id: 4,
    title: '技术检测',
    description: '使用专业工具进行技术层面的验证',
    icon: 'fas fa-tools'
  }
])

// 学习成就
const achievements = ref([
  {
    id: 1,
    title: '入门学者',
    description: '完成第一个学习模块',
    icon: 'fas fa-graduation-cap',
    progress: 100,
    unlocked: true
  },
  {
    id: 2,
    title: '文本专家',
    description: '完成所有文本检测模块',
    icon: 'fas fa-file-alt',
    progress: 33,
    unlocked: false
  },
  {
    id: 3,
    title: '实践达人',
    description: '完成10次实战练习',
    icon: 'fas fa-dumbbell',
    progress: 60,
    unlocked: false
  }
])

// 方法
const switchCategory = (categoryId) => {
  activeCategory.value = categoryId
}

const startModule = (module) => {
  if (module.locked) return
  alert(`开始学习: ${module.title}`)
  // 这里可以导航到具体的学习页面
}

const showModuleDetail = (module) => {
  alert(`模块详情: ${module.title}`)
}

const startPractice = (practice) => {
  alert(`开始练习: ${practice.title}`)
  // 这里可以导航到练习页面
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.detection-technique {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.progress-section {
  margin-bottom: 30px;
}

.progress-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.progress-card h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.progress-bar {
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
}

.technique-categories {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.tab-button {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button.active {
  color: #1e3c72;
  border-bottom-color: #1e3c72;
}

.category-description {
  margin-bottom: 30px;
}

.category-description h2 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.learning-modules {
  display: grid;
  gap: 20px;
}

.module-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}

.module-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.module-card.completed {
  background: #f8f9fa;
  border-color: #28a745;
}

.module-card.locked {
  opacity: 0.6;
  background: #f8f9fa;
}

.module-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.module-icon {
  width: 50px;
  height: 50px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.module-info {
  flex: 1;
}

.module-info h3 {
  color: #1e3c72;
  margin-bottom: 5px;
}

.module-info p {
  color: #666;
  margin: 0;
}

.module-status {
  font-size: 14px;
  font-weight: 500;
}

.status-completed {
  color: #28a745;
}

.status-locked {
  color: #6c757d;
}

.status-available {
  color: #1e3c72;
}

.module-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.module-meta {
  display: flex;
  gap: 15px;
  align-items: center;
}

.difficulty {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.difficulty.beginner {
  background: #d4edda;
  color: #155724;
}

.difficulty.intermediate {
  background: #fff3cd;
  color: #856404;
}

.difficulty.advanced {
  background: #f8d7da;
  color: #721c24;
}

.duration, .points {
  color: #666;
  font-size: 14px;
}

.module-actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.practice-section {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.practice-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.practice-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.practice-card:hover {
  transform: translateY(-2px);
}

.practice-image {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.practice-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.practice-type {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #1e3c72;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.practice-content {
  padding: 20px;
}

.practice-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.practice-content p {
  color: #666;
  margin-bottom: 15px;
}

.practice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.score {
  color: #28a745;
  font-weight: 500;
}

.quick-reference {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-reference h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tip-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.tip-icon {
  width: 40px;
  height: 40px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.tip-content h4 {
  color: #1e3c72;
  margin-bottom: 8px;
}

.tip-content p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.achievements {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.achievements h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.achievement-list {
  display: grid;
  gap: 20px;
}

.achievement-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.achievement-card.unlocked {
  background: #f8f9fa;
  border-color: #28a745;
}

.achievement-icon {
  width: 60px;
  height: 60px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.achievement-card.unlocked .achievement-icon {
  background: #28a745;
}

.achievement-info {
  flex: 1;
}

.achievement-info h3 {
  color: #1e3c72;
  margin-bottom: 8px;
}

.achievement-info p {
  color: #666;
  margin-bottom: 15px;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.achievement-progress .progress-bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.achievement-progress .progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .category-tabs {
    flex-wrap: wrap;
  }
  
  .module-header {
    flex-direction: column;
    text-align: center;
  }
  
  .module-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .practice-grid {
    grid-template-columns: 1fr;
  }
  
  .reference-grid {
    grid-template-columns: 1fr;
  }
  
  .achievement-card {
    flex-direction: column;
    text-align: center;
  }
}
</style> 